<template>
  <div class="child">
    <h2 v-add="school"></h2>
    <h2 v-beauty="toy"></h2>
  </div>
</template>

<script>
export default {
  name: 'Child',
  data() {
    return {
      school: '山鬼谷',
      toy: 'sex 奇迹私服',
    };
  },
  directives: {
    add(Element, { value }) {
      // console.log('有人调用的add自定义方法');
      Element.innerText += value + '~';
      Element.style.color = 'red';
      Element.style.backgroundColor = 'orange';
    },
  },
};
</script>

<style scoped>
.child {
  background-color: darkgray;
  padding: 20px;
  box-shadow: 0 0 10px;
}
</style>